package 
{
	import flash.display.MovieClip;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	import org.osmf.containers.MediaContainer;
	import org.osmf.elements.DurationElement;
	import org.osmf.elements.ParallelElement;
	import org.osmf.elements.SerialElement;
	import org.osmf.layout.HorizontalAlign;
	import org.osmf.layout.VerticalAlign;
	import org.osmf.media.DefaultMediaFactory;
	import org.osmf.media.MediaElement;
	import org.osmf.media.MediaPlayer;
	
	//Sets the size of the SWF
	
	[SWF(width="960", height="488", backgroundColor='#FFFFFF')]
	public class WT07_ContainerLayout extends MovieClip
	{
		import org.osmf.elements.VideoElement;
		import org.osmf.media.URLResource;
		import org.osmf.utils.URL;
		
		////////////////////////////////////////////////////
		//DECLARATIONS
		////////////////////////////////////////////////////
		
		//URI of the media
		public static const PRE_ROLL:String = "http://mediapm.edgesuite.net/osmf/content/test/logo_animated.flv";
		public static const STREAMING_MP4_PATH:String = "rtmp://cp67126.edgefcs.net/ondemand/mp4:mediapm/ovp/content/demo/video/elephants_dream/elephants_dream_768x428_24.0fps_408kbps.mp4";
		public static const TOP_BANNER_1:String = "assets/banners/osmf_re_reops_01.png";
		public static const TOP_BANNER_2:String = "assets/banners/osmf_re_reops_02.png";
		public static const TOP_BANNER_3:String = "assets/banners/osmf_re_reops_03.png";
		public static const RIGHT_BANNER_1:String = "http://mediapm.edgesuite.net/osmf/content/test/logo_animated.flv";
		public static const RIGHT_BANNER_2:String = "assets/banners/swf_banner.swf";
		
		public static const BANNER_DURATION:Number = 10;
		
		public var player:MediaPlayer;
		public var container:MediaContainer;
		public var mediaFactory:DefaultMediaFactory;
		
		////////////////////////////////////////////////////
		//CONSTRUCTOR
		////////////////////////////////////////////////////
		
		public function WT07_ContainerLayout()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			
			initPlayer();
		}
		
		
		
		
		protected function initPlayer():void
		{
			// Create a mediafactory instance
			mediaFactory = new DefaultMediaFactory();
			
			//Marker 1: The root element
			var rootElement:SerialElement = new SerialElement();
			
			var preRollElement:MediaElement = mediaFactory.createMediaElement( new URLResource( PRE_ROLL ) );
			var parallelComp:ParallelElement = new ParallelElement();
			
			rootElement.addChild( preRollElement );
			rootElement.addChild( parallelComp );
			
			
			//Marker 2: Main video element
			var mainElement:MediaElement = mediaFactory.createMediaElement( new URLResource( STREAMING_MP4_PATH ) );
			parallelComp.addChild( mainElement );
			
			//Marker 3: Top banner - serial element consiting of multiple images
			var topBannerElement:SerialElement = new SerialElement();
			var imageBanner1:DurationElement = new DurationElement( BANNER_DURATION, mediaFactory.createMediaElement( new URLResource( TOP_BANNER_1 ) ) );
			var imageBanner2:DurationElement = new DurationElement( BANNER_DURATION, mediaFactory.createMediaElement( new URLResource( TOP_BANNER_2 ) ) );
			var imageBanner3:MediaElement = mediaFactory.createMediaElement( new URLResource( TOP_BANNER_3 ) ); 
			topBannerElement.addChild( imageBanner1 );
			topBannerElement.addChild( imageBanner2 );
			topBannerElement.addChild( imageBanner3 );
			parallelComp.addChild( topBannerElement );
			
			//Marker 4: Right banner element
			var rightBannerElement:SerialElement = new SerialElement(); 
			rightBannerElement.addChild( mediaFactory.createMediaElement( new URLResource( RIGHT_BANNER_1 ) ) );
			rightBannerElement.addChild( mediaFactory.createMediaElement( new URLResource( RIGHT_BANNER_2 ) ) );
			parallelComp.addChild( rightBannerElement );
			
				
			
			
			// Create the containers
			
			//Marker 5: Root containter
			var rootContainer:MediaContainer = new MediaContainer();
			rootContainer.width = 960;
			rootContainer.height = 488;
			addChild( rootContainer );
			
			//Marker 6: Top container
			var topContainer:MediaContainer = new MediaContainer();
			topContainer.backgroundColor = 0x666666;
			topContainer.backgroundAlpha = .2;
			topContainer.layoutMetadata.percentWidth = 100;
			topContainer.layoutMetadata.height = 60;
			addChild( topContainer );
			
			//Marker 7: Right container
			var rightContainer:MediaContainer = new MediaContainer();
			rightContainer.width = 192;
			rightContainer.height = 428;
			rightContainer.backgroundColor = 0x000000;
			rightContainer.backgroundAlpha = 1;
			rightContainer.layoutMetadata.horizontalAlign = HorizontalAlign.RIGHT;
			rightContainer.layoutMetadata.verticalAlign = VerticalAlign.BOTTOM;
			addChild( rightContainer );
			
			//Marker 8: Main content container
			var mainContainer:MediaContainer = new MediaContainer();
			mainContainer.backgroundColor = 0x999999;
			mainContainer.backgroundAlpha = 1;
			mainContainer.width = 768;
			mainContainer.height = 428;
			mainContainer.layoutMetadata.verticalAlign = VerticalAlign.BOTTOM;
			mainContainer.layoutMetadata.horizontalAlign = HorizontalAlign.LEFT;
			addChild( mainContainer );
	//mainContainer.addEventListener(MouseEvent.CLICK, function():void{ trace( mainContainer.width + " " + mainContainer.height ) } );
			
			//Marker 9: Give the containers their media elements
			mainContainer.addMediaElement( rootElement );
			topContainer.addMediaElement( topBannerElement );
			rightContainer.addMediaElement( rightBannerElement );
			
			//Marker 10: Set the layout targets for the rootContainer
			rootContainer.layoutRenderer.addTarget( rightContainer );
			rootContainer.layoutRenderer.addTarget( topContainer );
			rootContainer.layoutRenderer.addTarget( mainContainer );
			
			// To operate playback of the content tree, construct a
			// media player. Assignment of the root element to its source will
			// automatically start its loading and playback:
			player = new MediaPlayer( rootElement );
		}
		
		
	}
}